<template>
  <span @click="clickWelcome">{{ welcome }}</span>
</template>

<script>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from "vue";
export default {
    setup() {

      // 匿名函数写法
      // onBeforeMount(function() {
      //   console.log("composition api, onBeforeMount()")
      // })

      // 箭头函数写法
      onBeforeMount(()=> {
        console.log("composition api, onBeforeMount()")
      })

      onMounted(()=> {
        console.log("composition api, onMounted()")
      })

      onBeforeUpdate(()=> {
        console.log("composition api, onBeforeUpdate()")
      })

      onUpdated(()=> {
        console.log("composition api, onUpdated()")
      })

      onBeforeUnmount(()=> {
        console.log("composition api, onBeforeUnmount()")
      })

      onUnmounted(()=> {
        console.log("composition api, onUnmounted()")
      })

      let welcome = ref("Hello World")
      function clickWelcome() {
        welcome.value = "Hello Vue3"
      }

      /**
       * 注意要将模块中使用到的变量与函数通过return返回出去
       * 
       * { key1: value1,
       *   key2: value2,
       * }
       * ES6特性：当key名称与value名称一致时，可将“key:”省略
       */
      return {welcome, clickWelcome}
    }
}
</script>

<style scoped></style>
